import { defineComponent } from "vue";
import { useRouter } from "vue-router";
import styles from "./hour.module.scss";
import { durationFormat } from "@/utils";

interface PropInterface {
  id: number;
  cid: number;
  title: string;
  duration: number;
  record: any;
  progress: number;
}

export const HourComponent = defineComponent({
  name: "HourComponent",
  props: {
    id: {
      type: Number,
      required: true,
    },
    cid: {
      type: Number,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    duration: {
      type: Number,
      required: true,
    },
    record: {
      type: Object as () => HourRecordModel | null,
      default: null,
    },
    progress: {
      type: Number,
      required: true,
    },
  },
  setup(props: PropInterface) {
    const router = useRouter();

    const goToPlay = () => {
      router.push(`/course/${props.cid}/hour/${props.id}`);
    };

    return () => (
      <div class={styles["item"]} onClick={goToPlay}>
        <div class={styles["left-item"]}>
          <i class="iconfont icon-icon-video"></i>
          <div class={styles["title"]}>
            {props.title}({durationFormat(Number(props.duration))})
          </div>
        </div>
        <div class="d-flex">
          {props.progress >= 0 && props.progress < 100 && (
            <>
              {props.progress === 0 && <div class={styles["link"]}>开始学习</div>}
              {props.progress !== 0 && (
                <>
                  <div class={styles["record"]}>
                    上次学习到
                    {durationFormat(Number(props.record?.finished_duration || 0))}
                  </div>
                  <div class={styles["link"]}>继续学习</div>
                </>
              )}
            </>
          )}
          {props.progress >= 100 && <div class={styles["complete"]}>已学完</div>}
        </div>
      </div>
    );
  },
});
